
<head>
<!-- Create a simple CodeMirror instance -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/clojure/clojure.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/css/reveal.css">

  <style type="text/css">
  .reveal .CodeMirror-lines {
    text-align: left !important;
}
 </style>
</head>
<body>
    <div class="reveal">
      <div class="slides">
 
<section>
<klipse-snippet id="code">
</klipse-snippet
</section>
</div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.3.0/js/reveal.js"></script>

    <script>
      Reveal.initialize({});
    </script>
   <script>
  var elem = document.getElementById('code');
ee = elem.attachShadow({mode: 'open'});
css = `<style>

@import "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css";
    :host {
          all: inherit;
        }
    </style>
    <textarea id="shadow-code">(map inc [1 2 3])</textarea>`
    <div class="CodeMirror cm-s-default"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 2.65875px; left: 372.89px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true" style="width: 18px; pointer-events: none;"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true" style="height: 18px; pointer-events: none;"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: 0px; border-right-width: 30px; min-height: 13px; min-width: 202.125px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 352.949px; top: 0px; height: 4.875px;">&nbsp;</div></div><div class="CodeMirror-code"><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -11.25px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div></div><pre class=" CodeMirror-line "><span style="padding-right: 0.1px;"><span class="cm-bracket">(</span><span class="cm-builtin">map</span> <span class="cm-builtin">inc</span> <span class="cm-bracket">[</span><span class="cm-number">1</span> <span class="cm-number">2</span> <span class="cm-number">3</span><span class="cm-bracket">])</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px; border-bottom: 0px solid transparent; top: 13px;"></div><div class="CodeMirror-gutters" style="height: 43px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 29px;"></div></div></div></div>
    ee.innerHTML = css ;
    console.log(ee);
    </script>
  
<script>
  /*var elem = ee.getElementById('shadow-code');
  var editor = CodeMirror.fromTextArea(elem, {
    lineNumbers: true,
    mode: 'clojure'
  });*/
</script>
</body>
